<!--
 * @Author: 秦少卫
 * @Date: 2024-05-17 15:30:21
 * @LastEditors: 秦少卫
 * @LastEditTime: 2024-10-13 17:21:09
 * @Description: file content
-->
<template>
  <div>
    <img :src="base64" />
    <canvas id="canvas"></canvas>
  </div>
</template>

<script name="imageComponents" setup>
import { useRoute, useRouter } from 'vue-router';
import useMaterial from '@/hooks/useMaterial';
// 功能组件
import { fabric } from 'fabric';
import Editor, {
  DringPlugin,
  AlignGuidLinePlugin,
  ControlsPlugin,
  // ControlsRotatePlugin,
  CenterAlignPlugin,
  LayerPlugin,
  CopyPlugin,
  MoveHotKeyPlugin,
  DeleteHotKeyPlugin,
  GroupPlugin,
  DrawLinePlugin,
  GroupTextEditorPlugin,
  GroupAlignPlugin,
  WorkspacePlugin,
  HistoryPlugin,
  FlipPlugin,
  RulerPlugin,
  MaterialPlugin,
  WaterMarkPlugin,
  FontPlugin,
  PolygonModifyPlugin,
  DrawPolygonPlugin,
  FreeDrawPlugin,
  PathTextPlugin,
  PsdPlugin,
  SimpleClipImagePlugin,
  BarCodePlugin,
  QrCodePlugin,
  ImageStroke,
  ResizePlugin,
  LockPlugin,
  AddBaseTypePlugin,
  MaskPlugin,
} from '@kuaitu/core';

// import { fabric } from 'fabric';
const router = useRouter();
const { getTemplInfo, updataTemplInfo } = useMaterial();

import ServersPlugin from '../../../packages/core/ServersPlugin';

const route = useRoute();
const fileName = ref('');
const base64 = ref('');
const APIHOST = import.meta.env.APP_APIHOST;

// 创建编辑器
const canvasEditor = new Editor();

onMounted(() => {
  // var canvas = new fabric.StaticCanvas(null);

  // 初始化fabric
  const canvas = new fabric.StaticCanvas('canvas');
  canvasEditor.initD(canvas);
  canvasEditor
    .use(DringPlugin)
    .use(PolygonModifyPlugin)
    // .use(AlignGuidLinePlugin)
    .use(ControlsPlugin)
    // .use(ControlsRotatePlugin)
    .use(CenterAlignPlugin)
    .use(LayerPlugin)
    .use(CopyPlugin)
    .use(MoveHotKeyPlugin)
    .use(DeleteHotKeyPlugin)
    .use(GroupPlugin)
    .use(DrawLinePlugin)
    .use(GroupTextEditorPlugin)
    .use(GroupAlignPlugin)
    .use(WorkspacePlugin)
    .use(HistoryPlugin)
    .use(FlipPlugin)
    .use(RulerPlugin)
    .use(DrawPolygonPlugin)
    .use(FreeDrawPlugin)
    .use(PathTextPlugin)
    .use(SimpleClipImagePlugin)
    .use(BarCodePlugin)
    .use(QrCodePlugin)
    .use(FontPlugin, {
      repoSrc: APIHOST,
    })
    .use(MaterialPlugin, {
      repoSrc: APIHOST,
    })
    .use(WaterMarkPlugin)
    .use(PsdPlugin)
    .use(ImageStroke)
    // .use(ResizePlugin)
    .use(LockPlugin)
    .use(AddBaseTypePlugin);

  if (route?.query?.id) {
    getTemplInfo(route?.query?.id)
      .then(async (res) => {
        fileName.value = res?.data?.attributes?.name;
        await canvasEditor.loadJSON(JSON.stringify(res?.data?.attributes?.json));
        base64.value = canvasEditor.canvas.toDataURL();
      })
      .catch((err) => {
        console.log(err);
        // window.location.href = '/';
      });
  }
});
</script>
